<template>
    <div class="layout">
        <!-- 搜索 -->
        <ZwSearchForm
            ref="searchForm"
            row-num="3"
            :option="searchOption"
            @search="query"
            @reset="reset"
            @expand="getTableH" />
        <div v-if="singleData.length !== 0" style="width: 100%" :class="props.ltType === 2 ? 'big_box' : ''">
            <div class="scroll">
                <el-scrollbar class="scrollbar" @scroll="scroll">
                    <ul class="record" :class="props.ltType === 2 ? 'setwidth' : 'restwidth'">
                        <div style="padding: 0 16px">
                            <li v-for="item in singleData" :key="item.id">
                                <div class="center">
                                    <span>{{ item.msgtime }}</span>
                                </div>
                                <div>
                                    <!-- 文本 -->
                                    <template v-if="item.msgtype === 1">
                                        <div v-if="item.from_type == 1" class="box_right">
                                            <div class="triangle_right"></div>
                                            <div class="box2_rights">
                                                <span class="text1_right">{{ item.name || '机器人' }}</span>
                                                <!-- <div class="white_right"> {{ item.text }} </div> -->
                                                <!-- <template v-if="item.text.length > 4 && item.text.match(/\[.+?\]/g)">
                          <span class="white_emoji">
                            <template v-for="(v, index) in item.text.match(/\[.+?\]/g)" :key="index">
                              <span>
                                <img :src="getEmojiUrl(v)" :alt="v" style="width: 20px; height: 20px; line-height: 20px" />
                              </span>
                            </template>
                          </span>
                        </template>
                      </span>
                    </template>
                    <img v-if="getEmojiUrl(item.text)" class="whites" :src="getEmojiUrl(item.text)" :alt="item.text" />
                    <div v-if="!getEmojiUrl(item.text) && !item.text.match(/\[.+?\]/g)" class="white"> {{ item.text }}</div> -->
                                                <div
                                                    class="white_right white_right_text"
                                                    v-html="getTextHtml(item.text)"></div>
                                            </div>
                                            <el-image class="img_right" :src="item.avatar">
                                                <template #error>
                                                    <el-image src="/static/file/pic.png"></el-image>
                                                </template>
                                            </el-image>
                                        </div>
                                        <div v-else class="box">
                                            <div class="triangle"></div>
                                            <el-image class="img" :src="item.avatar">
                                                <template #error>
                                                    <el-image src="/static/file/pic.png"></el-image>
                                                </template>
                                            </el-image>
                                            <div class="box2">
                                                <span class="text1">{{ item.name }}</span>
                                                <div class="white white_text" v-html="getTextHtml(item.text)"></div>
                                            </div>
                                        </div>
                                    </template>
                                    <!-- 图片 -->
                                    <template v-if="item.msgtype === 9">
                                        <div v-if="item.from_type == 1" class="picture_right">
                                            <div class="box_right">
                                                <div class="box2_right">
                                                    <span class="text1_right">{{ item.name }}</span>
                                                    <el-image
                                                        :src="item.media_path"
                                                        :preview-src-list="[item.media_path]"
                                                        style="width: 150px; height: 150px"></el-image>
                                                    <!-- <img class="img1" :src="item.media_path" @click="lookPic(item)" /> -->
                                                </div>
                                                <el-image class="img_right" :src="item.avatar">
                                                    <template #error>
                                                        <el-image src="/static/file/pic.png"></el-image>
                                                    </template>
                                                </el-image>
                                                <!-- <img class="img_right" :src="item.avatar || '@/assets/logo.png'" /> -->
                                            </div>
                                        </div>
                                        <div v-else class="picture">
                                            <div class="box">
                                                <el-image class="img" :src="item.avatar">
                                                    <template #error>
                                                        <el-image src="/static/file/pic.png"></el-image>
                                                    </template>
                                                </el-image>
                                                <!-- <img class="img" :src="item.avatar || '@/assets/logo.png'" /> -->
                                                <div class="box2">
                                                    <span class="text1">{{ item.name }}</span>
                                                    <el-image
                                                        :src="item.media_path"
                                                        :preview-src-list="[item.media_path]"
                                                        style="width: 150px; height: 150px"></el-image>
                                                    <!-- <img class="img1" :src="item.media_path" @click="lookPic(item)" /> -->
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                    <template v-if="item.msgtype === 2">
                                        <div v-if="item.from_type == 1" class="picture_right">
                                            <div class="box_right">
                                                <div class="box2_right">
                                                    <span class="text1_right">{{ item.name }}</span>
                                                    <el-image
                                                        :src="item.media_path"
                                                        :preview-src-list="[item.media_path]"
                                                        style="width: 150px; height: 150px"
                                                        fit="cover"></el-image>
                                                    <!-- <img class="img1" :src="item.media_path" @click="lookPic(item)" /> -->
                                                </div>
                                                <el-image class="img_right" :src="item.avatar">
                                                    <template #error>
                                                        <el-image src="/static/file/pic.png"></el-image>
                                                    </template>
                                                </el-image>
                                                <!-- <img class="img_right" :src="item.avatar || '@/assets/logo.png'" /> -->
                                            </div>
                                        </div>
                                        <div v-else class="picture">
                                            <div class="box">
                                                <el-image class="img" :src="item.avatar">
                                                    <template #error>
                                                        <el-image src="/static/file/pic.png"></el-image>
                                                    </template>
                                                </el-image>
                                                <!-- <img class="img" :src="item.avatar || '@/assets/logo.png'" /> -->
                                                <div class="box2">
                                                    <span class="text1">{{ item.name }}</span>
                                                    <el-image
                                                        :src="item.media_path"
                                                        :preview-src-list="[item.media_path]"
                                                        style="width: 150px; height: 150px"
                                                        fit="cover"></el-image>
                                                    <!-- <img class="img1" :src="item.media_path" @click="lookPic(item)" /> -->
                                                </div>
                                            </div>
                                        </div>
                                    </template>

                                    <!-- <audio autoplay src="/static/voice.mp3" controls> 您的浏览器不支持播放 </audio> -->
                                    <!-- 语音 -->
                                    <template v-if="item.msgtype === 5">
                                        <div v-if="item.from_type == 1" class="voice_right">
                                            <div class="box_right">
                                                <div class="triangle_right"></div>
                                                <div class="box2_right">
                                                    <span class="text1_right">{{ item.name }}</span>
                                                    <div class="voiceted_right" @click="palyAudio(item)">
                                                        <!-- item.media_path -->
                                                        <span>{{ JSON.parse(item.msgdata)?.play_length || 0 }}秒</span>
                                                        <audio
                                                            ref="onaudio"
                                                            class="audio_con_right"
                                                            :class="'audio_box_' + item.id"
                                                            :src="item.media_path"
                                                            controls>
                                                            您的浏览器不支持播放
                                                        </audio>
                                                        <img
                                                            src="@/assets/chatDetails/voice.png"
                                                            style="width: 11px; height: 15px" />
                                                    </div>
                                                </div>
                                                <!-- <img class="img_right" :src="item.avatar || '@/assets/logo.png'" /> -->
                                                <el-image class="img_right" :src="item.avatar">
                                                    <template #error>
                                                        <el-image src="/static/file/pic.png"></el-image>
                                                    </template>
                                                </el-image>
                                            </div>
                                        </div>
                                        <div v-else class="voice">
                                            <div class="box">
                                                <el-image class="img" :src="item.avatar">
                                                    <template #error>
                                                        <el-image src="/static/file/pic.png"></el-image>
                                                    </template>
                                                </el-image>
                                                <!-- <img class="img" :src="item.avatar || '@/assets/logo.png'" /> -->
                                                <div class="triangle"></div>
                                                <div class="box2">
                                                    <span class="text1">{{ item.name }}</span>
                                                    <div class="voiceted" @click="palyAudio(item)">
                                                        <!-- item.media_path -->
                                                        <audio
                                                            ref="onaudio"
                                                            class="audio_con"
                                                            :class="'audio_box_' + item.id"
                                                            :src="item.media_path"
                                                            controls>
                                                            您的浏览器不支持播放
                                                        </audio>
                                                        <img
                                                            src="@/assets/chatDetails/voice.png"
                                                            style="width: 11px; height: 15px" />
                                                        <span>{{ JSON.parse(item.msgdata)?.play_length || 0 }}秒</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>

                                    <!-- 视频 -->
                                    <template v-if="item.msgtype === 6">
                                        <div v-if="item.from_type == 1" class="gif">
                                            <div class="box_right">
                                                <div class="box2_right">
                                                    <span class="text1_right">{{ item.name }}</span>
                                                    <div class="video_box_right" @click.prevent="playVideo(item)">
                                                        <div class="play_right"></div>
                                                        <el-image :src="getVideoImage(item.media_path, 140, 100)">
                                                            <template #error>
                                                                <el-image src="/static/file/mov.png"></el-image>
                                                            </template>
                                                        </el-image>
                                                    </div>
                                                </div>
                                                <el-image class="img_right" :src="item.avatar">
                                                    <template #error>
                                                        <el-image src="/static/file/pic.png"></el-image>
                                                    </template>
                                                </el-image>
                                                <!-- <img class="img_right" :src="item.avatar || '@/assets/logo.png'" /> -->
                                            </div>
                                        </div>
                                        <div v-else class="gif">
                                            <div class="box">
                                                <el-image class="img" :src="item.avatar">
                                                    <template #error>
                                                        <el-image src="/static/file/pic.png"></el-image>
                                                    </template>
                                                </el-image>
                                                <!-- <img class="img" :src="item.avatar || '@/assets/logo.png'" /> -->
                                                <div class="box2">
                                                    <span class="text1">{{ item.name }}</span>
                                                    <div class="video_box" @click.prevent="playVideo(item)">
                                                        <div class="play"></div>
                                                        <el-image
                                                            class="wel_content_file_item"
                                                            :src="getVideoImage(item.media_path, 140, 100)">
                                                            <template #error>
                                                                <el-image src="/static/file/mov.png"></el-image>
                                                            </template>
                                                        </el-image>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>

                                    <!-- 名片 -->
                                    <!-- <template v-if="item.msgtype == 7">
                    <div class="box_right" v-if="item.from_type == 1">
                      <div class="triangle_right"></div>
                      <div class="box2_rights">
                        <span class="text1_right">{{ item.name || '机器人' }}</span>
                        <template v-if="item.text.length > 4 && item.text.match(/\[.+?\]/g)">
                          <span class="white_emoji">
                            <template v-for="(v, index) in item.text.match(/\[.+?\]/g)" :key="index">
                              <span>
                                <img :src="getEmojiUrl(v)" :alt="v" style="width: 20px; height: 20px; line-height: 20px" />
                              </span>
                            </template>
                          </span>
                        </template>
                        <img v-if="getEmojiUrl(item.text)" class="white_rights" :src="getEmojiUrl(item.text)" :alt="item.text" />
                        <div v-if="!getEmojiUrl(item.text) && !item.text.match(/\[.+?\]/g)" class="white_right"> 
                        <MinPianMsg :data="item" />
                        </div>
                      </div>
                      <el-image class="img_right" :src="item.avatar">
                        <template #error>
                          <el-image src="/static/file/pic.png"></el-image>
                        </template>
                      </el-image>
                    </div>
                    <div class="box" v-else>
                      <div class="triangle"></div>
                      <el-image class="img" :src="item.avatar">
                        <template #error>
                          <el-image src="/static/file/pic.png"></el-image>
                        </template>
                      </el-image>
                      <div class="box2">
                        <span class="text1">{{ item.name }}</span>
                        <template v-if="item.text.length > 4 && item.text.match(/\[.+?\]/g)">
                          <span class="white_lemoji">
                            <template v-for="(v, index) in item.text.match(/\[.+?\]/g)" :key="index">
                              <span>
                                <img :src="getEmojiUrl(v)" :alt="v" style="width: 20px; height: 20px; line-height: 20px" />
                              </span>
                            </template>
                          </span>
                        </template>
                        <img v-if="getEmojiUrl(item.text)" class="whites" :src="getEmojiUrl(item.text)" :alt="item.text" />
                        <div v-if="!getEmojiUrl(item.text) && !item.text.match(/\[.+?\]/g)" class="white"> {{ item.text }}</div>
                      </div>
                    </div>
                  </template> -->

                                    <!-- 文件txt -->
                                    <template v-if="item.msgtype === 10">
                                        <div v-if="item.from_type == 1" class="txt_right">
                                            <div class="box_right">
                                                <div class="box2_right">
                                                    <span class="text1_right">{{ item.name }}</span>
                                                    <div class="texttxt_right" @click="lookFile(item)">
                                                        <div style="display: flex">
                                                            <div style="display: flex; flex-direction: column">
                                                                <span>{{ JSON.parse(item.msgdata)?.filename }}</span
                                                                ><span style="margin-top: 10px"
                                                                    >{{
                                                                        (
                                                                            JSON.parse(item.msgdata)?.filesize /
                                                                            1024 /
                                                                            1024
                                                                        ).toFixed(2)
                                                                    }}M</span
                                                                >
                                                            </div>
                                                            <img
                                                                :src="getSuffixIcon(item.media_path)"
                                                                style="width: 40px; height: 40px; margin-left: 40px" />
                                                        </div>
                                                    </div>
                                                </div>
                                                <el-image class="img_right" :src="item.avatar">
                                                    <template #error>
                                                        <el-image src="/static/file/pic.png"></el-image>
                                                    </template>
                                                </el-image>
                                                <!-- <img class="img_right" :src="item.avatar || '@/assets/logo.png'" />  -->
                                                <div class="triangle_right"></div>
                                            </div>
                                        </div>
                                        <div v-else class="txt">
                                            <div class="box">
                                                <el-image class="img" :src="item.avatar">
                                                    <template #error>
                                                        <el-image src="/static/file/pic.png"></el-image>
                                                    </template>
                                                </el-image>
                                                <!-- <img class="img" :src="item.avatar || '@/assets/logo.png'" />  -->
                                                <div class="triangle"></div>
                                                <div class="box2">
                                                    <span class="text1">{{ item.name }}</span>
                                                    <div class="texttxt" @click="lookFile(item)">
                                                        <div style="display: flex">
                                                            <div style="display: flex; flex-direction: column">
                                                                <span>{{ JSON.parse(item.msgdata)?.filename }}</span
                                                                ><span style="margin-top: 10px"
                                                                    >{{
                                                                        (
                                                                            JSON.parse(item.msgdata)?.filesize /
                                                                            1024 /
                                                                            1024
                                                                        ).toFixed(2)
                                                                    }}M</span
                                                                >
                                                            </div>
                                                            <img
                                                                :src="getSuffixIcon(item.media_path)"
                                                                style="width: 40px; height: 40px; margin-left: 40px" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>

                                    <!-- 链接 -->
                                    <template v-if="item.msgtype === 11">
                                        <div v-if="item.from_type == 1" class="link_right">
                                            <div class="box_right">
                                                <div class="triangle_right"></div>
                                                <div class="box2_right">
                                                    <span class="text1_right">{{ item.name }}</span>
                                                    <div class="links_right" @click="lookLink(item)">
                                                        <div>
                                                            <div>{{ JSON.parse(item.msgdata)?.title }}</div>
                                                            <div style="display: flex; margin-top: 11px">
                                                                <div class="linkss_right">
                                                                    {{ JSON.parse(item.msgdata)?.link_url }}
                                                                </div>
                                                                <img
                                                                    style="width: 50px; height: 50px"
                                                                    :src="JSON.parse(item.msgdata)?.image_url" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <el-image class="img_right" :src="item.avatar">
                                                    <template #error>
                                                        <el-image src="/static/file/pic.png"></el-image>
                                                    </template>
                                                </el-image>
                                                <!-- <img class="img_right" :src="item.avatar || '@/assets/logo.png'" /> -->
                                            </div>
                                        </div>
                                        <div v-else class="link">
                                            <div class="box">
                                                <el-image class="img" :src="item.avatar">
                                                    <template #error>
                                                        <el-image src="/static/file/pic.png"></el-image>
                                                    </template>
                                                </el-image>
                                                <!-- <img class="img" :src="item.avatar || '@/assets/logo.png'" /> -->
                                                <div class="triangle"></div>
                                                <div class="box2">
                                                    <span class="text1">{{ item.name }}</span>
                                                    <div class="links" @click="lookLink(item)">
                                                        <div>
                                                            <div>{{ JSON.parse(item.msgdata)?.title }}</div>
                                                            <div style="display: flex; margin-top: 11px">
                                                                <div class="linkss">
                                                                    {{ JSON.parse(item.msgdata)?.link_url }}
                                                                </div>
                                                                <img
                                                                    style="width: 50px; height: 50px"
                                                                    :src="JSON.parse(item.msgdata)?.image_url" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>

                                    <!-- 小程序消息 -->
                                    <template v-if="item.msgtype === 12">
                                        <div v-if="item.from_type == 1" class="applet_right">
                                            <div class="box_right">
                                                <div class="triangle_right"></div>
                                                <div class="box2_right">
                                                    <span class="text1_right">{{ item.name }}</span>
                                                    <div class="applets_right">
                                                        <div style="margin-left: 18px">
                                                            <div style="margin-top: 11px">
                                                                <img
                                                                    class="app-img_right"
                                                                    src="@/assets/chatDetails/Appletbg.png" />
                                                                <span class="app-title_right">{{
                                                                    JSON.parse(item.msgdata)?.title
                                                                }}</span>
                                                            </div>
                                                            <div style="margin: 8px 0 11px">
                                                                {{ JSON.parse(item.msgdata)?.description }}
                                                            </div>
                                                            <img src="@/assets/chatDetails/appletcurrency.png" />
                                                            <div class="app_line_right"></div>
                                                            <img
                                                                class="app_simg_right"
                                                                src="@/assets/chatDetails/Applet.png" />
                                                            <span class="app-text_right">小程序</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <el-image class="img_right" :src="item.avatar">
                                                    <template #error>
                                                        <el-image src="/static/file/pic.png"></el-image>
                                                    </template>
                                                </el-image>
                                                <!-- <img class="img_right" :src="item.avatar || '@/assets/logo.png'" /> -->
                                            </div>
                                        </div>
                                        <div v-else class="applet">
                                            <div class="box">
                                                <el-image class="img" :src="item.avatar">
                                                    <template #error>
                                                        <el-image src="/static/file/pic.png"></el-image>
                                                    </template>
                                                </el-image>
                                                <!-- <img class="img" :src="item.avatar || '@/assets/logo.png'" /> -->
                                                <div class="triangle"></div>
                                                <div class="box2">
                                                    <span class="text1">{{ item.name }}</span>
                                                    <div class="applets">
                                                        <div style="margin-left: 18px">
                                                            <div style="margin-top: 11px">
                                                                <img
                                                                    class="app-img"
                                                                    src="@/assets/chatDetails/Appletbg.png" />
                                                                <span class="app-title">{{
                                                                    JSON.parse(item.msgdata)?.title
                                                                }}</span>
                                                            </div>
                                                            <div style="margin: 8px 0 11px">
                                                                {{ JSON.parse(item.msgdata)?.description }}
                                                            </div>
                                                            <img src="@/assets/chatDetails/appletcurrency.png" />
                                                            <div class="app_line"></div>
                                                            <img
                                                                class="app_simg"
                                                                src="@/assets/chatDetails/Applet.png" />
                                                            <span class="app-text">小程序</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>

                                    <!-- 红包 -->
                                    <template v-if="item.msgtype === 19">
                                        <div v-if="item.from_type == 1" class="noredenvelopes_right">
                                            <div class="box_right">
                                                <div class="box2_right">
                                                    <span class="text1_right">{{ item.name }}</span>
                                                    <div class="noenvelopes_right">
                                                        <div class="noenvelopes-layout_right">
                                                            <img
                                                                style="width: 40px; height: 40px"
                                                                src="@/assets/chatDetails/yredenvelopes.png" />
                                                            <div class="spot_right">{{ item.text }}</div>
                                                        </div>
                                                        <div style="margin: 0 20px">
                                                            <div class="noenvelopes-line_right"></div>
                                                            <div class="noenvelopes-text_right">红包</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <el-image class="img_right" :src="item.avatar">
                                                    <template #error>
                                                        <el-image src="/static/file/pic.png"></el-image>
                                                    </template>
                                                </el-image>
                                                <!-- <img class="img_right" :src="item.avatar || '@/assets/logo.png'" /> -->
                                                <div class="redtriangle_right"></div>
                                            </div>
                                        </div>
                                        <div v-else class="noredenvelopes">
                                            <div class="box">
                                                <el-image class="img" :src="item.avatar">
                                                    <template #error>
                                                        <el-image src="/static/file/pic.png"></el-image>
                                                    </template>
                                                </el-image>
                                                <!-- <img class="img" :src="item.avatar || '@/assets/logo.png'" /> -->
                                                <div class="redtriangle"></div>
                                                <div class="box2">
                                                    <span class="text1">{{ item.name }}</span>
                                                    <div class="noenvelopes">
                                                        <div class="noenvelopes-layout">
                                                            <img
                                                                style="width: 40px; height: 40px"
                                                                src="@/assets/chatDetails/yredenvelopes.png" />
                                                            <div class="spot">{{ item.text }}</div>
                                                        </div>
                                                        <div style="margin: 0 20px">
                                                            <div class="noenvelopes-line"></div>
                                                            <div class="noenvelopes-text">红包</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>

                                    <!-- 音频存档消息 -->
                                    <template v-if="item.msgtype === 23">
                                        <!-- <div class="voice_right" v-if="item.from_type == 1">
                      <div class="box_right">
                        <div class="triangle_right"></div>
                        <div class="box2_right">
                          <span class="text1_right">{{ item.name }}</span>
                          <div class="voiceted_right" @click="palyAudio(item)">
                            <span>{{ JSON.parse(item.msgdata)?.play_length || 0 }}秒</span>
                            <audio ref="onaudio" class="audio_con_right" :class="'audio_box_' + item.id" :src="item.media_path" controls> 您的浏览器不支持播放 </audio>
                            <img src="@/assets/chatDetails/notconnected.png" style="width: 24px; height: 13px" />
                          </div>
                        </div>
                        <el-image class="img_right" :src="item.avatar">
                          <template #error>
                            <el-image src="/static/file/pic.png"></el-image>
                          </template>
                        </el-image>
                      </div>
                    </div> -->
                                        <div v-if="item.from_type == 1" class="box_right">
                                            <div class="triangle_right"></div>
                                            <div class="box2_right">
                                                <span class="text1_right">{{ item.name || '机器人' }}</span>
                                                <div class="white_right">
                                                    通话语音：{{
                                                        formatDuring(
                                                            JSON.parse(item.msgdata)?.endtime * 1000 -
                                                                Date.parse(item.msgtime)
                                                        )
                                                    }}
                                                </div>
                                            </div>
                                            <el-image class="img_right" :src="item.avatar">
                                                <template #error>
                                                    <el-image src="/static/file/pic.png"></el-image>
                                                </template>
                                            </el-image>
                                        </div>
                                        <div v-else class="box">
                                            <div class="triangle"></div>
                                            <el-image class="img" :src="item.avatar">
                                                <template #error>
                                                    <el-image src="/static/file/pic.png"></el-image>
                                                </template>
                                            </el-image>
                                            <div class="box2">
                                                <span class="text1">{{ item.name }}</span>
                                                <div class="white">
                                                    通话语音：{{
                                                        formatDuring(
                                                            JSON.parse(item.msgdata)?.endtime * 1000 -
                                                                Date.parse(item.msgtime)
                                                        )
                                                    }}
                                                </div>
                                                <!-- <div class="white"> 通话语音：{{ Date.parse(item.msgtime) }}</div> -->
                                            </div>
                                        </div>
                                    </template>

                                    <!-- 群成员 -->
                                </div>
                            </li>
                        </div>
                    </ul>
                </el-scrollbar>
            </div>

            <div v-if="props.ltType === 2" class="group">
                <el-scrollbar class="group-layout">
                    <div class="group-distance">
                        <!-- <div style="margin-bottom: 16px">
              <div class="group-total"> 群成员: {{ total }}</div>
            </div> -->
                        <el-input
                            v-model="groupMembers"
                            class="input"
                            placeholder="请输入名称进行查找"
                            @change="onChangeGroupMembers()" />
                    </div>
                    <div v-for="item in group_list" :key="item.id" class="records" @click="getStyle(item)">
                        <div class="member">
                            <el-image class="group-img" :src="item.avatar">
                                <template #error>
                                    <el-image src="/static/file/pic.png"></el-image>
                                </template>
                            </el-image>
                            <span>{{ item.name }}</span> <span>({{ item.type }})</span>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </div>
        <div v-else>
            <div class="no_data">
                <img class="no_img" src="@/assets/noData.png" alt="" />
                <div class="no_title">暂无数据</div>
            </div>
        </div>
        <Videowicket ref="videoWicketRef" />
        <!-- 预览 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle" :width="dialogWidth" center>
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import MinPianMsg from './MinPianMsg.vue';
import { qrcanvas } from 'qrcanvas';
import { reactive, computed, onMounted, ref, watch, watchEffect, defineExpose } from 'vue';
import Videowicket from './videoWicket.vue';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import {
    getMessageType,
    getChatDetails,
    getGroupChatDetails,
    getGroupMembers,
    getGroupChatDetailsUser
} from '@/api/employe/riskmonitoring/messagearchiving';
import { playTime, getVideoImage, getSuffixIcon, downFile } from '@/utils/utils';
import { ElMessage } from 'element-plus';
import { getEmojiUrl } from '@/utils/emoji';
import bus from '@/utils/bus';
import { debounce } from 'lodash';
const props = defineProps([
    'ltType',
    'work_user_id',
    'singleData',
    'msgid',
    'roomid',
    'groupData',
    'staff_id',
    'cust_id',
    'index'
]);
const emit = defineEmits(['query', 'updataSingledata']);
const dialogVisible = ref(false);
const groupMembers = ref();
const users = ref([]);
const selectId = ref(1);
const singleDataS: any = ref([]);
const chatDetailsData: any = ref([]);
const total = ref(0);
const group_list: any = ref([]);
const videoWicketRef = ref(null);
const dialogImageUrl = ref('');
const dialogTitle = ref('图片预览');
const dialogWidth = ref('');
// eslint-disable-next-line vue/no-dupe-keys
const singleData = ref([]);
const isWorkUerId = ref(false);
const searchForm = ref<any>(null);

const clientHeight = document.documentElement.clientHeight;
const height = `${clientHeight - 360}px`;

const formatDuring = (item: any, flag?: boolean) => {
    const date = JSON.parse(item.msgdata);
    const { play_length } = date;
    let isLong = false;
    let text = '';
    if (play_length) {
        isLong = true;
        text = `通话时长：${calcTime(play_length)}`;
    } else {
        isLong = false;
        text = '通话时长：00:00';
    }
    if (flag) {
        return text;
    } else {
        return isLong;
    }
};
const searchOption = computed(() => {
    return [
        {
            label: '消息类型',
            name: 'msgtype',
            value: '',
            type: 'select',
            placeholder: '请选择',
            filterable: true,
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    getMessageType().then((res: any) => {
                        resolve(res);
                    });
                });
            },
            formatOption: (v: any) => ({
                label: v.name,
                value: v.value
            })
        },
        {
            label: '消息搜索',
            name: 'keyword',
            value: '',
            type: 'input',
            width: '280px',
            placeholder: '请输入内容'
        },
        {
            label: '时间筛选',
            name: 'msgtime',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间'
        }
    ];
});
// // 时间戳转化成时分秒
// const formatDuring = (micro_second) => {
//   var second = Math.floor(micro_second / 1000)
//   // // 小时
//   // var hr = Math.floor((second / 3600) % 24)
//   // 分钟
//   var min = Math.floor((second / 60) % 60)
//   // 秒
//   var sec = Math.floor(second % 60)
//   return min + '分钟' + sec + '秒'
// }

const downloadAudio = (item: any) => {
    const { media_path, msgtime } = item;
    downFile(media_path, msgtime);
};

const calcTime = (length: number) => {
    const oneHour = 60 * 60;
    const oneMinute = 60;
    const { step: hours, rest: hour_rest } = recursion(length, oneHour);
    if (hours > 0) {
        const { step: minutes, rest: minute_rest } = recursion(hour_rest, oneMinute);
        if (minutes > 0) {
            return `${formatTme(hours)}:${formatTme(minutes)}:${formatTme(minute_rest)}`;
        } else {
            return `${formatTme(hours)}:00:${formatTme(minute_rest)}`;
        }
    } else {
        const { step: minutes, rest: minute_rest } = recursion(length, oneMinute);
        if (minutes > 0) {
            return `${formatTme(minutes)}:${formatTme(minute_rest)}`;
        } else {
            return `00:${formatTme(length)}`;
        }
    }
};

const recursion = (length: number, scale: number) => {
    let step = 0;
    let rest = 0;
    if (length >= scale) {
        step = Math.floor(length / scale);
        rest = length % scale;
    } else {
        rest = length;
    }
    return { step, rest };
};

const formatTme = (num: number) => {
    return num > 9 ? `${num}` : `0${num}`;
};

// 视频播放
const playVideo = (item: any) => {
    videoWicketRef.value.videoCheck = true;
    videoWicketRef.value.video_url = item.media_path;
    videoWicketRef.value.getTime();
};
// 播放语音
const palyAudio = (item: any) => {
    const dom = document.querySelector('.audio_box_' + item.id);
    if (dom.paused) {
        dom.play();
    } else {
        dom.pause();
    }
};

const palyAudioPro = (item: any) => {
    const { media_path } = item;
    item.toPause = !item.toPause;
    if (item.player) {
        if (item.toPause) {
            item.player.play();
        } else {
            item.player.pause();
        }
    } else {
        item.player = new Audio(media_path);
        item.player.play();
    }
};

// 文件
const lookFile = (item: any) => {
    window.open(item.media_path);
};
//lianjie
// 生成二维码
const lookLink = (data: any) => {
    const item = JSON.parse(data.msgdata);
    const src = creatQrCode(item.link_url);
    dialogVisible.value = true;
    dialogImageUrl.value = src!;
    dialogTitle.value = '查看链接';
    dialogWidth.value = '350px';
};

// 查看图片
const lookPic = (data: any) => {
    dialogVisible.value = true;
    dialogImageUrl.value = data.media_path;
    dialogTitle.value = '查看图片';
    // dialogWidth.value = String(JSON.parse(data.msgdata)?.filesize / 150) + 'px'
};
const creatQrCode = (data: any) => {
    return qrcanvas({
        data,
        size: 100
    }).toDataURL('image/png');
};

const onChangeGroupMembers = () => {
    const groupMemberParams = {
        roomid: props.roomid,
        keywords: groupMembers.value,
        page: 1,
        page_size: ''
    };
    getGroupMembers(groupMemberParams).then(({ data }: any) => {
        emit('updatagroupMember', data);
    });
};
const times = ref([]);
const formData = reactive({
    msgtype: '',
    keyword: '',
    msgtime: []
});

const start = ref(true);
const paged = ref(1);
const pageg = ref(1);
const scroll = debounce(async (item: any) => {
    const el = document.querySelector('.scroll');
    const clientHeight = el?.clientHeight;
    const scrollHeight = el?.scrollHeight;
    const scrollTop = Math.ceil(el?.scrollTop);
    if (scrollTop >= scrollHeight - clientHeight) {
        if (!start.value) return;
        if (props.index && props.index.index == 0) {
            if (props.ltType === 1) {
                if (!props.work_user_id) {
                    if (!props.msgid || !props.msgid) {
                        return;
                    }
                }
                const params = {
                    cust_id: props.cust_id,
                    work_user_id: props.work_user_id,
                    staff_id: props.staff_id,
                    msgid: props.msgid,
                    msgtype: formData.msgtype,
                    keywords: formData.keyword,
                    msgtime: times.value,
                    page: ++paged.value,
                    page_size: 10
                };
                let data = [];
                if (props.work_user_id) {
                    data = await getGroupChatDetailsUser(params);
                } else {
                    data = await getChatDetails(params, true);
                }
                if (data.data.length === 0) {
                    start.value = false;
                    return;
                }
                singleData.value = [...singleData.value, ...data.data];
                emit('updataSingledata', data.data);
            } else {
                if (!props.roomid) {
                    return;
                }
                const paramss = {
                    cust_id: props.cust_id,
                    staff_id: props.staff_id,
                    roomid: props.roomid,
                    msgtype: formData.msgtype,
                    keywords: formData.keyword,
                    msgtime: times.value,
                    page: ++pageg.value,
                    page_size: 10
                };
                // start.value = false
                // 群聊查询记录
                const { data } = await getGroupChatDetails(paramss, true);
                if (data.length === 0) {
                    start.value = false;
                    return;
                }
                singleData.value = [...singleData.value, ...data];
                emit('updataSingledata', data);
            }
        } else {
            if (props.ltType === 1) {
                if (!props.work_user_id) {
                    if (!props.msgid || !props.msgid) {
                        return;
                    }
                }
                const params = {
                    work_user_id: props.work_user_id,
                    cust_id: props.cust_id,
                    msgid: props.msgid,
                    msgtype: formData.msgtype,
                    keywords: formData.keyword,
                    msgtime: times.value,
                    page: ++paged.value,
                    page_size: 10
                };
                let data = [];
                if (props.work_user_id) {
                    data = await getGroupChatDetailsUser(params);
                } else {
                    data = await getChatDetails(params, true);
                }
                singleData.value = [...singleData.value, ...data.data];
                if (data.data.length === 0) {
                    start.value = false;
                    return;
                }
                emit('updataSingledata', data.data);
            } else {
                if (!props.roomid) {
                    return;
                }
                const paramss = {
                    cust_id: props.cust_id,
                    roomid: props.roomid,
                    staff_id: props.staff_id,
                    msgtype: formData.msgtype,
                    keywords: formData.keyword,
                    msgtime: times.value,
                    page: ++pageg.value,
                    page_size: 10
                };
                // start.value = false
                // 群聊查询记录
                const { data } = await getGroupChatDetails(paramss, true);
                singleData.value = [...singleData.value, ...data];
                if (data.length === 0) {
                    start.value = false;
                    return;
                }
                emit('updataSingledata', data);
            }
        }
        start.value = true;
    }
}, 500);

const takeover: any = ref([]);
getMessageType().then((data: any) => {
    takeover.value = data;
});

const getStyle = (item: any) => {
    selectId.value = item.id;
};
// 查询记录
const query: any = async (v?: any) => {
    if (v) {
        formData.msgtype = v.msgtype;
        formData.keyword = v.keyword;
        times.value = v.msgtime;
    }
    if (paged.value !== 1 || pageg.value !== 1 || formData.msgtype) {
        singleData.value = [];
        paged.value = 1;
        pageg.value = 1;
    }
    // 单聊查询记录
    if (props.index && props.index.index == 0) {
        if (props.ltType === 1) {
            if (!props.work_user_id) {
                if (!props.msgid || !props.msgid) {
                    return;
                }
            }
            const params = {
                cust_id: props.cust_id,
                work_user_id: props.work_user_id,
                staff_id: props.staff_id,
                msgid: props.msgid,
                msgtype: formData.msgtype,
                keywords: formData.keyword,
                msgtime: times.value,
                page: paged.value,
                page_size: 10
            };
            let data = [];
            if (props.work_user_id) {
                data = await getGroupChatDetailsUser(params);
            } else {
                data = await getChatDetails(params);
            }
            singleData.value = data.data;
            isWorkUerId.value = props.work_user_id ? true : false;
            emit('updataSingledata', data.data);
        } else {
            if (!props.roomid) {
                return;
            }
            const paramss = {
                cust_id: props.cust_id,
                staff_id: props.staff_id,
                roomid: props.roomid,
                msgtype: formData.msgtype,
                keywords: formData.keyword,
                msgtime: times.value,
                page: pageg.value,
                page_size: 10
            };
            // 群聊查询记录
            isWorkUerId.value = props.work_user_id ? true : false;
            const { data } = await getGroupChatDetails(paramss);
            singleData.value = data;
        }
    } else {
        if (props.ltType === 1) {
            if (!props.work_user_id) {
                if (!props.msgid || !props.msgid) {
                    return;
                }
            }
            const params = {
                work_user_id: props.work_user_id,
                cust_id: props.cust_id,
                msgid: props.msgid,
                msgtype: formData.msgtype,
                keywords: formData.keyword,
                msgtime: times.value,
                // msgtime_start: formData.start_time,
                // msgtime_end: formData.end_time,
                page: paged.value,
                // page: 1,
                page_size: 10
            };
            let data = [];
            if (props.work_user_id) {
                data = await getGroupChatDetailsUser(params);
            } else {
                data = await getChatDetails(params);
            }
            singleData.value = data.data;
            isWorkUerId.value = props.work_user_id ? true : false;
        } else {
            if (!props.roomid) {
                return;
            }
            const paramss = {
                cust_id: props.cust_id,
                roomid: props.roomid,
                staff_id: props.staff_id,
                msgtype: formData.msgtype,
                keywords: formData.keyword,
                msgtime: times.value,
                page: pageg.value,
                page_size: 10
            };
            // 群聊查询记录
            const { data } = await getGroupChatDetails(paramss);
            singleData.value = data;
            isWorkUerId.value = props.work_user_id ? true : false;
        }
    }
    start.value = true;
    paged.value = 1;
    pageg.value = 1;
};
// 清空数据
const reset = () => {
    paged.value = 1;
    pageg.value = 1;
    formData.msgtype = '';
    formData.keyword = '';
    formData.msgtime = [];
    times.value = [];
    singleData.value = [];
    start.value = false;
    query();
    start.value = true;
};
query();

const getTextHtml = (val: any) => {
    const str2 =
        val &&
        val.replace(/\n/g, '<br />').replace(/\[.+?\]/g, (res: any) => {
            return `<img src="${getEmojiUrl(
                res
            )}" style="position: relative;top: 3px;width: 20px; height: 20px; line-height: 20px" />`;
        });
    return str2;
};

watch(
    () => props.roomid,
    val => {
        reset();
    }
);
watch(
    () => props.groupData,
    val => {
        if (Array.isArray(val)) {
            group_list.value = val;
            total.value = val.length;
        } else {
            group_list.value = val.data;
            total.value = val.total;
        }
    }
);
// 切换单群聊置空数据
watch(
    () => props.ltType,
    () => {
        // formData.end_time = ''
        // formData.start_time = ''
        reset();
    },
    { deep: true }
);
watch(
    () => props.msgid,
    (val: any) => {
        reset();
    }
);
const changePage = () => {
    start.value = true;
    paged.value = 1;
    pageg.value = 1;
};
// 清空查询数据
const resetParams = () => {
    searchForm.value.reset();
};
defineExpose({
    query,
    paged,
    pageg,
    start,
    singleData,
    resetParams
});
</script>

<style lang="scss" scoped>
.layout {
    position: relative;
    width: 100%;

    .big_box {
        display: flex;
    }

    .el-dialog--center .el-dialog__body img {
        width: 300px;
        height: 300px;
    }

    :deep.active {
        color: #f9624b;
    }

    .scroll {
        width: 100%;
        overflow: hidden;
        position: relative;
        background-color: #f9f9f9;
        margin-top: 16px;
        border: 1px solid #eae7e7;
        box-sizing: border-box;

        .scrollbar {
            height: v-bind(height);

            .record {
                padding: 20px 0;

                .center span {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-bottom: 20px;
                    font-size: 13px;
                    color: #969696;
                }

                .box_right {
                    display: flex;
                    position: relative;
                    justify-content: flex-end;

                    .triangle_right {
                        width: 0;
                        height: 0;
                        border-left: 6px solid #fff;
                        border-top: 6px solid transparent;
                        border-bottom: 6px solid transparent;
                        position: absolute;
                        right: 0;
                        top: 19px;
                    }

                    .redtriangle_right {
                        width: 0;
                        height: 0;
                        border-left: 6px solid #f9624b;
                        border-top: 6px solid transparent;
                        border-bottom: 6px solid transparent;
                        position: absolute;
                        right: 46px;
                        top: 23px;
                    }

                    .img_right {
                        width: 40px;
                        height: 40px;
                        margin-left: 7px;
                    }

                    .box2_rights {
                        text-align: right;
                        margin-right: 5px;

                        .text1_right {
                            display: block;
                            color: #969696;
                            font-size: 12px;
                            margin-bottom: 3px;
                            text-align: right;
                        }

                        .white_right {
                            background-color: #fff;
                            color: #000;
                            max-width: 300px;
                            word-break: break-all;
                            display: inline-flex;
                            padding: 6px 12px;
                            border-radius: 6px;
                            font-size: 16px;
                            line-height: 20px;
                            font-family: STHeitiSC-Medium, STHeitiSC;
                            font-weight: 500;
                            text-align: left;
                        }

                        .white_right_text {
                            display: block;
                        }

                        .white_emoji {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background-color: #fff;
                            padding: 6px 12px;
                            border-radius: 6px;
                        }

                        .white_rights {
                            background-color: #fff;
                            color: #000;
                            max-width: 300px;
                            word-break: break-all;
                            display: inline-flex;
                            padding: 6px 12px;
                            border-radius: 6px;
                            font-size: 16px;
                            line-height: 20px;
                            font-family: STHeitiSC-Medium, STHeitiSC;
                            font-weight: 500;
                            width: 20px;
                            height: 20px;
                        }

                        .white_text {
                            background-color: #fff;
                            color: #000;
                            padding: 6px 12px;
                            border-radius: 6px;
                            text-align: left;
                            line-height: 20px;
                        }
                    }

                    .box2_right {
                        // display: flex;
                        // flex-direction: column;
                        // text-align: right;
                        margin-right: 5px;

                        .text1_right {
                            display: block;
                            color: #969696;
                            font-size: 12px;
                            margin-bottom: 3px;
                            text-align: right;
                        }

                        .video_box_right {
                            position: relative;
                            width: 140px;
                            height: 100px;
                            cursor: pointer;

                            .play_right {
                                width: 25px;
                                height: 25px;
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                                background: url('@/assets/image/material/play.png') no-repeat;
                                background-size: cover;
                                z-index: 1;
                            }
                        }

                        .white_right {
                            background-color: #fff;
                            color: #000;
                            max-width: 300px;
                            word-break: break-all;
                            display: inline-flex;
                            padding: 6px 12px;
                            border-radius: 6px;
                            font-size: 16px;
                            line-height: 20px;
                            font-family: STHeitiSC-Medium, STHeitiSC;
                            font-weight: 500;
                            text-align: left;
                        }
                    }
                }

                .audio_box {
                    display: flex;
                    flex-direction: column;

                    .el-icon {
                        font-size: 16px;
                        color: #666;
                        line-height: 1;
                        margin-right: 6px;
                    }

                    .title {
                        display: flex;
                        align-items: center;
                        height: 24px;

                        .title_icon {
                        }

                        .text {
                            font-size: 14px;
                            color: #333;
                            line-height: 1;
                        }
                    }

                    .operation {
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        margin-top: 6px;
                        padding-left: 20px;

                        .operation_icon {
                            font-size: 22px;

                            &:hover {
                                cursor: pointer;
                                color: #999;
                            }
                        }

                        .operation_type {
                            position: relative;

                            .el-icon {
                                font-size: 28px;
                            }

                            .audio_con_right {
                                // position: absolute;
                                // left: -10px;
                                // top: 0px;
                                // width: 250px;
                                // height: 30px;
                                z-index: -1;
                                opacity: 0;
                            }
                        }
                    }
                }

                .box {
                    display: flex;
                    position: relative;

                    .img {
                        width: 40px;
                        height: 40px;
                        margin-right: 7px;
                    }

                    .triangle {
                        width: 0;
                        height: 0;
                        border-right: 6px solid #fff;
                        border-top: 6px solid transparent;
                        border-bottom: 6px solid transparent;
                        position: absolute;
                        left: 46px;
                        top: 23px;
                    }

                    .redtriangle {
                        width: 0;
                        height: 0;
                        border-right: 6px solid #f9624b;
                        border-top: 6px solid transparent;
                        border-bottom: 6px solid transparent;
                        position: absolute;
                        left: 46px;
                        top: 23px;
                    }

                    .box2 {
                        display: flex;
                        flex-direction: column;
                        margin-left: 5px;

                        .video_box {
                            position: relative;
                            width: 140px;
                            height: 100px;
                            cursor: pointer;

                            .play {
                                width: 25px;
                                height: 25px;
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                                background: url('@/assets/image/material/play.png') no-repeat;
                                background-size: cover;
                                z-index: 1;
                            }
                        }

                        .text1 {
                            color: #969696;
                            font-size: 12px;
                            margin-bottom: 3px;
                        }

                        .white {
                            text-align: left;
                            background-color: #fff;
                            color: #000;
                            max-width: 300px;
                            word-break: break-all;
                            display: inline-flex;
                            padding: 6px 12px;
                            border-radius: 6px;
                            font-size: 16px;
                            line-height: 20px;
                            font-family: STHeitiSC-Medium, STHeitiSC;
                            font-weight: 500;
                        }

                        .white_text {
                            display: block;
                            background-color: #fff;
                            padding: 6px 12px;
                            border-radius: 6px;
                        }

                        .whites {
                            text-align: left;
                            background-color: #fff;
                            color: #000;
                            max-width: 300px;
                            word-break: break-all;
                            display: inline-flex;
                            padding: 6px 12px;
                            border-radius: 6px;
                            font-size: 16px;
                            line-height: 20px;
                            font-family: STHeitiSC-Medium, STHeitiSC;
                            font-weight: 500;
                            width: 20px;
                            height: 20px;
                        }

                        .white_lemoji {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background-color: #fff;
                            padding: 6px 12px;
                            border-radius: 6px;
                        }
                    }
                }

                .picture {
                    position: relative;
                }

                .gif {
                    position: relative;

                    .gifimg {
                        width: 113.4px;
                        height: 77px;
                    }
                }

                .businesscard {
                    position: relative;

                    .text1 {
                        color: #969696;
                        font-size: 12px;
                        margin-bottom: 3px;
                        margin-left: 4px;
                    }

                    .box3 {
                        width: 186px;
                        height: 99px;
                        margin-left: 4px;
                        background-color: #fff;
                        display: flex;
                        flex-direction: column;
                        padding: 11px 0 0 18px;

                        .text2 {
                            font-size: 16px;
                            color: #000;
                            margin-bottom: 10px;
                        }

                        .card {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            width: 120px;
                            height: 52px;
                            border: 1px solid #eaeaea;
                            padding: 0 13px;
                        }
                    }
                }

                .discerntext {
                    margin-top: 18px;
                    position: relative;

                    .discern {
                        width: 163px;
                        height: 38px;
                        background-color: #fff;
                        line-height: 38px;
                        text-align: center;
                    }
                }

                .notconnected {
                    margin-top: 18px;
                    position: relative;

                    .nconnected {
                        width: 120px;
                        height: 38px;
                        background-color: #fff;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0 17px;
                    }
                }

                .fconnected {
                    margin-top: 18px;
                    position: relative;

                    .connected {
                        width: 155px;
                        height: 38px;
                        background-color: #fff;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0 15px;
                    }
                }

                .cancelvideo {
                    margin-top: 18px;
                    position: relative;

                    .cancel {
                        width: 98px;
                        height: 38px;
                        background-color: #fff;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0 15px;
                    }
                }

                .voice {
                    margin-top: 18px;
                    position: relative;

                    .voiceted {
                        width: 100px;
                        height: 38px;
                        background-color: #fff;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0 15px;
                        position: relative;
                        cursor: pointer;

                        .audio_con {
                            position: absolute;
                            left: 5px;
                            top: 4px;
                            width: 250px;
                            height: 30px;
                            z-index: -1;
                            opacity: 0;
                        }
                    }
                }

                .voice_right {
                    margin-top: 18px;
                    position: relative;

                    .voiceted_right {
                        width: 100px;
                        height: 38px;
                        background-color: #fff;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0 15px;
                        position: relative;
                        cursor: pointer;

                        .audio_con_right {
                            position: absolute;
                            left: 5px;
                            top: 4px;
                            width: 250px;
                            height: 30px;
                            z-index: -1;
                            opacity: 0;
                        }
                    }
                }

                .audio {
                    margin-top: 18px;
                    position: relative;

                    .audioted {
                        width: 100px;
                        height: 38px;
                        background-color: #fff;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0 15px;
                        position: relative;
                        cursor: pointer;
                    }
                }

                .txt {
                    margin-top: 18px;
                    position: relative;

                    .texttxt {
                        // width: 210px;
                        // height: 50px;
                        background-color: #fff;
                        padding: 10px 14px;
                        line-height: 15px;
                        max-width: 230px;
                        word-break: break-all;
                        display: inline-flex;
                        border-radius: 6px;
                        cursor: pointer;
                    }
                }

                .txt_right {
                    margin-top: 18px;
                    position: relative;

                    .texttxt_right {
                        // width: 210px;
                        // height: 50px;
                        background-color: #fff;
                        padding: 10px 14px;
                        line-height: 15px;
                        max-width: 230px;
                        word-break: break-all;
                        display: inline-flex;
                        border-radius: 6px;
                    }
                }

                .red {
                    margin-top: 18px;
                    position: relative;

                    .nored {
                        width: 270px;
                        height: 110px;
                        background-color: #fff;
                        padding: 0 14px;
                    }
                }

                .mixedmessage {
                    margin-top: 18px;
                    position: relative;

                    .message {
                        width: 270px;
                        height: 147px;
                        background-color: #fff;

                        .bg {
                            width: 243px;
                            height: 99px;
                            border: 1px solid #f3f3f3;
                            background-color: #fff4ef;
                            text-align: center;
                            line-height: 99px;
                        }
                    }
                }

                .groupchat {
                    margin-top: 18px;
                    position: relative;

                    .chat {
                        width: 240px;
                        height: 106px;
                        background-color: #fff;
                    }
                }

                .schedule {
                    margin-top: 19px;
                    width: 378px;
                    height: 162px;
                    background-color: #fff;
                    overflow: hidden;
                    vertical-align: middle;
                    position: relative;

                    .radius {
                        display: inline-block;
                        width: 2px;
                        height: 2px;
                        background-color: #979797;
                        border-radius: 50%;
                        margin-right: 10px;
                    }
                }

                .mycard {
                    margin-top: 18px;
                    position: relative;

                    .personal {
                        width: 230px;
                        height: 105px;
                        background-color: #fff;
                    }
                }

                .noredenvelopes {
                    margin-top: 18px;
                    position: relative;

                    .noenvelopes {
                        width: 260px;
                        height: 89px;
                        background-color: #f9624b;

                        .noenvelopes-layout {
                            display: flex;
                            margin: 12px 0 0 15px;
                        }

                        .spot {
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            color: #fff0ce;
                            line-height: 40px;
                        }

                        .noenvelopes-line {
                            border-bottom: 1px solid #fa8978;
                            margin: 7px 0;
                        }

                        .noenvelopes-text {
                            color: #ffebeb;
                            font-size: 12px;
                        }
                    }
                }

                .noredenvelopes_right {
                    margin-top: 18px;
                    position: relative;

                    .noenvelopes_right {
                        width: 260px;
                        height: 89px;
                        background-color: #f9624b;

                        .noenvelopes-layout_right {
                            display: flex;
                            margin-left: 15px;
                            padding-top: 12px;

                            // margin: 12px 0 0 15px;
                        }

                        .spot_right {
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            color: #fff0ce;
                            line-height: 40px;
                        }

                        .noenvelopes-line_right {
                            border-bottom: 1px solid #fa8978;
                            margin: 7px 0;
                        }

                        .noenvelopes-text_right {
                            color: #ffebeb;
                            font-size: 12px;
                        }
                    }
                }

                .redenvelopes {
                    margin-top: 18px;
                    position: relative;

                    .envelopes {
                        width: 260px;
                        height: 89px;
                        background-color: #faab9f;

                        .spot {
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            color: #fff0ce;
                            line-height: 40px;
                        }
                    }
                }

                .link {
                    margin-top: 18px;
                    position: relative;

                    .links {
                        background-color: #fff;
                        cursor: pointer;
                        border-radius: 6px;
                        padding: 10px 14px;

                        .linkss {
                            max-width: 180px;
                            word-break: break-all;
                            color: #969696;
                            font-size: 12px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 4;
                        }
                    }
                }

                .link_right {
                    margin-top: 18px;
                    position: relative;

                    .links_right {
                        background-color: #fff;
                        cursor: pointer;
                        border-radius: 6px;
                        padding: 10px 14px;

                        .linkss_right {
                            max-width: 180px;
                            word-break: break-all;
                            color: #969696;
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }

    .group {
        margin-top: 16px;
        display: flex;

        .group-layout {
            // height: 818px;
            height: v-bind(height);

            // height: 706px;
            border: 1px solid #d6d2d2;
            background-color: #fff;
            border-color: rgb(0 0 0 / 8%);

            .group-distance {
                margin-top: 16px;
                padding: 0 16px;

                .group-total {
                    font-size: 14px;
                    color: #969696;
                }
            }

            .records {
                margin: 8px 0 0;
                padding: 0 16px;

                .member {
                    // width: 208px;
                    height: 52px;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                    /* width: 60px; */
                    line-height: 52px;

                    .group-img {
                        width: 36px;
                        height: 36px;
                        vertical-align: middle;
                        margin-right: 10px;
                    }
                }
            }

            .hover-detail-color {
                background-color: #fffaf9;
                padding-left: -16px;
            }
        }
    }

    .form-inline {
        min-height: 56px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f9f9f9;
        padding: 16px 20px 0;

        .el-form-item {
            margin-bottom: 16px;
        }

        &.nowrap {
            flex-wrap: wrap;
        }
    }

    .selectTime {
        :deep(.el-form-item__content) {
            display: flex;
            align-items: center;

            .text-center {
                min-width: 14px;
                margin: 0 13px;
                border-top: 1px solid #969696;
            }
        }
    }

    .setwidth {
        // width: calc(100% - 255px);
        // width: 70% !important;
        width: 100% !important;
    }

    .restwidth {
        width: 100% !important;
    }

    .apply {
        margin-top: 18px;
        position: relative;

        .applys {
            width: 270px;
            height: 106px;
            background-color: #fff;
        }
    }

    .applet {
        margin-top: 18px;
        position: relative;

        .applets {
            width: 260px;
            height: 283px;
            background-color: #fff;

            .app-img {
                width: 21px;
                height: 20px;
                vertical-align: middle;
            }

            .app-title {
                color: #969696;
                font-size: 12px;
                margin-left: 8px;
            }

            .app_line {
                border-bottom: 1px solid #eaeaea;
                margin: 7px 0;
            }

            .app_simg {
                vertical-align: middle;
                margin-right: 4px;
            }

            .app-text {
                color: #969696;
                font-size: 12px;
            }
        }
    }

    .applet_right {
        margin-top: 18px;
        position: relative;

        .applets_right {
            width: 260px;
            height: 283px;
            background-color: #fff;

            .app-img_right {
                width: 21px;
                height: 20px;
                vertical-align: middle;
            }

            .app-title_right {
                color: #969696;
                font-size: 12px;
                margin-left: 8px;
            }

            .app_line_right {
                border-bottom: 1px solid #eaeaea;
                margin: 7px 0;
            }

            .app_simg_right {
                vertical-align: middle;
                margin-right: 4px;
            }

            .app-text_right {
                color: #969696;
                font-size: 12px;
            }
        }
    }
}

.check-box {
    text-align: right;
}

.no_data {
    // height: 80vh;
    padding: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #909399;
    font-size: 14px;

    .no_img {
        margin-left: 35px;
    }
}
</style>
